import React,{useEffect, useRef, useState} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { PlusOutlined,  } from '@ant-design/icons';
import {Button, Image, message, Popconfirm, Select, Space} from 'antd';
import type { ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import AddModal from './AddModal'
import {getArticleLists, deleteArticle, getArticleClassify, cancelGoods} from '@/services/ant-design-pro/article'
import RelationModal from './RelationModal';


const Index = () => {
  const [isShow, setIsShow] = useState(false);
  const actionRef = useRef<ActionType>();
  const [isClassify,setIsClassify] = useState([])
  const [isRelation,setIsRelation] = useState(false)
  const { Option } = Select;

  // 弹出删除框
  const text = '你确定要删除吗?';
  // 添加文章的事件
  const add =()=>{
    setIsShow(true)
  }
  // 弹出关联商品的模态框
  const relation =(record)=>{
    setIsRelation(true)
  }
  useEffect(async ()=>{
    // 获取文章分类列表
    const classify = await getArticleClassify();
    setIsClassify(classify)

    console.log(classify);
  },[])

  // 声明表格数据
  const columns= [
    {
      title: 'ID',
      dataIndex: 'id',
      align:'center',
      search:false
    },
    {
      title: '文章图片',
      dataIndex: 'image_input',
      align:'center',
      search:false,
      render:(_,record)=> {
        return (
          <Image
            width={80}
            src={record.image_input}
          />
          )
      }
    },
    {
      title:'文章名称',
      dataIndex: 'title',
      width:'300px',
      align:'center',
    },
    {
      title:'文章分类',
      dataIndex: 'category_id',
      align:'center',
      renderFormItem:()=>{
        return (
          <Select style={{ width: '100%' }}>
            <Option key={0} value={0}>全部</Option>
            {
              isClassify.map(item=>{
                return <Option key={item.id} value={item.id}>{item.category_id}</Option>
              })
            }
          </Select>
        )
      },
    },
    {
      title: '关联商品',
      dataIndex: 'product_id',
      align:'center',
      valueType: 'select',
      search:false,
    },
    {
      title: '浏览量',
      dataIndex: 'visit',
      align:'center',
      search: false,
    },
    {
      title: '时间',
      align:'center',
      dataIndex: 'created_at',
      sorter: true,
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      align:'center',
      search: false,
      render: (_,record) => {

        console.log(record);
        return (
          <div style={{display: 'flex',justifyContent:'center'}}>
            <a key="link" onClick={()=>{}}>编辑&nbsp;</a>
            { record.product_id
              ?
              <a key='link1'>
                <Popconfirm
                  placement="top"
                  title={text}
                  okText="确定"
                  cancelText="取消"
                  onCancel={()=>{
                    message.success('关联成功！')
                    actionRef.current?.reload();
                  }}
                  onConfirm={async ()=>{await cancelGoods(
                    record.id
                  ).then(()=>{
                    message.success('取消关联成功！')
                    actionRef.current?.reload();
                  })
                  }}
                >
                  取消关联&nbsp;
                </Popconfirm>
              </a>
              :
              <a key="link2" onClick={relation}>
                关联&nbsp;
                <RelationModal record={record} isRelation={isRelation} setIsRelation={setIsRelation} actionRef={actionRef}/>
              </a>
            }
            <a key="link3">
              <Popconfirm
                placement="top"
                title={text}
                okText="确定"
                cancelText="取消"
                onCancel={()=>{
                  message.success('取消删除成功！')
                  actionRef.current?.reload();
                }}
                onConfirm={async ()=>{await deleteArticle(
                  record.id
                ).then(()=>{
                  message.success('操作成功！')
                  actionRef.current?.reload();
                })
                }}
              >
                 删除
              </Popconfirm>
            </a>
          </div>
          )
      }
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params,sort,filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          const {data,meta} = await getArticleLists( { ...params,...sort,...filter } )
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        dateFormatter="string"
        headerTitle="文章管理"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={ add }>
            添加文章
          </Button>,
        ]}
      />
      <AddModal actionRef={actionRef} isShow={isShow} setIsShow={setIsShow}/>
    </PageContainer>

  );
};

export default Index;
